body {
  font-size: 20px;
}
.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 4em;
  height: 4em;
  margin: auto;
}
.container {
  position: absolute;
  left: 0;
  height: 2em;
  width: 4em;
  overflow: hidden;
}
.halfCir {
  width: 100%;
  height: 100%;
  background: red;
}
.container1 {
  top: 0;
}
.container1::after {
  content: " ";
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  bottom: 0;
  right: 0;
  background: #fff; /* 换成背景颜色 */
}
.container1 .halfCir {
  left: 0;
  border-radius: 4em 4em 0 0;
  transform-origin: 50% 100%;
  animation: halfCir1 3s infinite linear;
}
.container2 {
  bottom: 0;
}
.container2 .halfCir {
  border-radius: 0 0 4em 4em;
  transform-origin: 50% 0%;
  transform: rotateZ(17deg);
  animation: halfCir2 3s infinite linear;
}
@keyframes halfCir1 {
  0% {
    transform: rotateZ(170deg);
  }

  50%,
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes halfCir2 {
  0%,
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(17deg);
  }
}
.wrapper::after {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 3em;
  height: 3em;
  /* background: #fff; */

  border-radius: 50%;
  content: "";
  background-image: url(../img/loadbg2.png);
  background-size: cover;
  /* background-size: contain; */
}
.cir {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.5em;
  height: 0.5em;
  margin: auto;
  background: red;
  border-radius: 50%;
  transform-origin: -1.49em 0;
}
.cir1 {
  transform: rotateZ(335deg);
}
.cir2 {
  transform: rotateZ(10deg);
  animation: cir2 3s infinite linear;
}
@keyframes cir2 {
  0% {
    transform: rotateZ(340deg);
  }
  47% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(10deg);
  }
}

.test {
  width: 100px;
  height: 100px;
  position: relative;
  /* border: 2px solid red; */
  margin: 100px auto;
}
.test::after {
  content: " ";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: #fff;
  border-radius: 50%;
}
.child {
  width: 100%;
  height: 100%;
  background-color: red;
  border-radius: 50%;
}
